import { Component, OnInit } from '@angular/core';
import {SiteV2API} from '../../site-v2-constants';
import {Path} from '../../../../portal/admin/admin-breadcrumb/breadcrumb';
import {ActivatedRoute, Router} from '@angular/router';
import {PageSubject} from '../../../../util/page-subject';
import {ResponseUtil} from '../../../../util/response-util';
import {OneDialogService} from '../../../../widgets/one-dialog/one-dialog.service';
import {TableUtil} from '../../../../util/table-util';
import {RoutConstants} from '../../../../constants/constants';
import {FormUtil} from '../../../../util/form-util';

declare var moment;

@Component({
  selector: 'app-site-range-table',
  templateUrl: './site-range-table.component.html',
  styleUrls: ['./site-range-table.component.css']
})
export class SiteRangeTableComponent implements OnInit {

  startDate;
  endDate;
  siteCode: string;

  table: any;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private pageSubject: PageSubject,
    private responseUtil: ResponseUtil,
    private tableUtil: TableUtil,
    private dialogService: OneDialogService
  ) { }

  ngOnInit() {
    this.pushPage();
    this.initData();
    this.loadMobileDevice();
  }
  /**
   * 面包屑导航
   */
  pushPage() {
    const path = new Path('设备接入管理', '');
    this.pageSubject.pushPage('站点区间', '查询', path);
  }
  initData = () => {
    this.siteCode = this.route.snapshot.params['siteCode'] || '';
  };
  returnToMap() {
    this.router.navigate([RoutConstants.siteRangeMap], {relativeTo: this.route});
  }
  /**
   * 加载表格
   */
  loadMobileDevice() {
    this.table = this.tableUtil.load('one_table_mobile-device',  {
      columns: [
        {checkbox: true },
        {field: 'id', title: 'ID', align: 'left', visible: false, switchable: false},
        {field: 'siteName', title: '站点名称', align: 'left'},
        {field: 'siteCode', title: '站点编码', align: 'left'},
        {field: 'regionName', title: '行政区划', align: 'left'},
        {field: 'startDate', title: '开始时间',  align: 'middle'},
        {field: 'endDate', title: '结束时间',  align: 'middle'},
        {field: 'modeType', title: '类型',  align: 'middle', formatter: this.modeTypeFormat},
        {field: 'address', title: '位置',  align: 'middle'},
        {field: 'longitude', title: '定点经度',  align: 'middle'},
        {field: 'latitude', title: '定点纬度',  align: 'middle'},
        {field: 'isUse', title: '启用', align: 'middle', formatter: this.yesOrNoFormat},
        {field: 'remark', title: '说明', align: 'middle'}
      ],
      idField: 'id',
      // sidePagination: 'server',
      pagination: true,
      pageNumber: 1,
      pageSize: 15,
      pageList: [10, 15, 50],
      singleSelect: false, // 多选
      clickToSelect: true, // 点击选中
      toolbar: '#one_operation_mobile-device',
      url: SiteV2API.siteRangePageListV2 + '&siteCode=' + this.siteCode,
      method: 'post',
      // 传递附加参数
      queryParams: (params) => {
        // params.siteCode = this.siteCode;
        // params.startDate = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
        // params.endDate = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
        // return params;
      },
      // 返回数据处理器
      responseHandler: (result) => {
        if (result.data && result.data.length > 0) {
          return result.data;
        } else {
          return [];
        }
      },
      height: 700, // table高度
      sortable: true,
      order: 'asc',
      classes: 'table table-hover',
      striped: true, // 隔行变色
      mobileResponsive: true // 响应式
    });
  }

  /**
   * 格式化函数
   * @param value
   * @param row
   * @param index
   * @returns {string}
   */
  private yesOrNoFormat = (value, row, index) => {
    if (value === '1') {
      return '是';
    } else {
      return '否';
    }
  };
  private modeTypeFormat = (value, row, index) => {
    if (value === '1') {
      return '巡航';
    } else {
      return '定点';
    }
  };
  search() {
    let startDate = '',  endDate = '';
    if (this.startDate && this.endDate) {
      startDate = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
      endDate = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
    }
    this.table.bootstrapTable('refresh', {url: SiteV2API.siteRangePageListV2 + '&siteCode=' + this.siteCode
      + '&startDate=' + startDate
      + '&endDate=' + endDate})
  }
  /**
   * 开始时间结束时间
   */
  startValueChange = () => {
    if (this.startDate > this.endDate) {
      this.endDate = null;
    }
    console.log(this.startDate);
  };
  endValueChange = () => {
    if (this.startDate > this.endDate) {
      this.startDate = null;
    }
    console.log(this.endDate);
  };
  disabledStartDate = (startValue) => {
    if (!startValue || !this.endDate) {
      return false;
    }
    return startValue.getTime() > this.endDate.getTime();
  };
  disabledEndDate = (endValue) => {
    if (!endValue || !this.startDate) {
      return false;
    }
    return endValue.getTime() < this.startDate.getTime();
  };
}
